<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>湖人主题应用</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <!-- 登录界面 -->
        <div id="loginScreen" class="screen active">
            <div class="container">
                <div class="card">
                    <h1 class="title">湖人主题应用</h1>
                    <h2 class="subtitle">登录您的账户</h2>
                    
                    <form id="loginForm">
                        <div class="input-group">
                            <input type="text" id="loginUsername" placeholder="用户名" required>
                        </div>
                        
                        <div class="input-group">
                            <input type="password" id="loginPassword" placeholder="密码" required>
                        </div>
                        
                        <div id="loginError" class="error-message" style="display: none;">
                            用户名或密码错误
                        </div>
                        
                        <button type="submit" id="loginBtn" class="btn primary">
                            <span class="btn-text">登录</span>
                            <div class="loading" style="display: none;"></div>
                        </button>
                    </form>
                    
                    <button class="link-btn" onclick="showRegister()">
                        没有账户？立即注册
                    </button>
                </div>
            </div>
        </div>

        <!-- 注册界面 -->
        <div id="registerScreen" class="screen">
            <div class="container">
                <div class="card">
                    <h1 class="title">湖人主题应用</h1>
                    <h2 class="subtitle">创建新账户</h2>
                    
                    <form id="registerForm">
                        <div class="input-group">
                            <input type="text" id="registerUsername" placeholder="用户名" required>
                        </div>
                        
                        <div class="input-group">
                            <input type="email" id="registerEmail" placeholder="邮箱" required>
                        </div>
                        
                        <div class="input-group">
                            <input type="password" id="registerPassword" placeholder="密码" required>
                        </div>
                        
                        <div id="registerError" class="error-message" style="display: none;">
                            请填写所有字段
                        </div>
                        
                        <button type="submit" id="registerBtn" class="btn primary">
                            <span class="btn-text">注册</span>
                            <div class="loading" style="display: none;"></div>
                        </button>
                    </form>
                    
                    <button class="link-btn" onclick="showLogin()">
                        已有账户？立即登录
                    </button>
                </div>
            </div>
        </div>

        <!-- 主界面 -->
        <div id="mainScreen" class="screen">
            <div class="container">
                <div class="card">
                    <h1 class="title">欢迎使用</h1>
                    <h2 class="subtitle">湖人主题应用</h2>
                    
                    <div class="welcome-content">
                        <p class="welcome-text">欢迎, <span id="welcomeUsername">用户</span>!</p>
                        <p class="description">您已成功登录到湖人主题应用</p>
                        <p class="token-info">Token: <span id="userToken">sample_token...</span></p>
                        
                        <button class="btn primary" onclick="logout()">
                            退出登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>